<template>
  <van-cell-group>
    <van-field
      type="textarea"
      v-model="content"
      label="帖子内容"
      placeholder="写下你的心中所想~"
      rows="6"
      autosize
      maxlength="2000"
      show-word-limit
    />

    <van-uploader
      v-model="fileList"
      max-count="4"
      max-size="1024 * 1024"
      accept="image/*"
      multiple
    />
    <van-cell
      >大于1M的图片无法上传，最多可上传4张&bigoplus;_&bigstar;!!</van-cell
    >
    <van-cell title="选择标签">
      <van-button
        plain
        hairline
        type="primary"
        color="#000000"
        @click="show = true"
        >{{ tags[0] }}</van-button
      >
      <van-overlay :show="show">
        <div class="picker">
          <van-picker
            toolbar-position="bottom"
            title="选择标签"
            :columns="columns"
            :default-index="0"
            @cancel="show = false"
            @confirm="onConfirm"
          />
        </div>
      </van-overlay>
    </van-cell>
    <van-cell title="是否匿名">
      <van-switch v-model="checked" active-color="#000000" />
    </van-cell>
    <van-cell center title="我的积分：">{{ userpoints }}</van-cell>
    <van-cell right>(每天上线自动领取1积分，发布一条贴子消耗1积分)</van-cell>
    <van-cell>
      <van-button
        type="primary"
        @click="OnPutOut"
        round="true"
        color="linear-gradient(to right, #a9a9a9, #333333)"
        >发布</van-button
      >
    </van-cell>
  </van-cell-group>
  <van-tabbar v-model="activeName" @change="OnchangeTab">
    <van-tabbar-item name="" icon="wap-home-o" to="">主页</van-tabbar-item>
    <van-tabbar-item name="search" icon="search">搜索</van-tabbar-item>
    <van-tabbar-item name="putout" icon="add">发布</van-tabbar-item>
    <van-tabbar-item name="user" icon="user-o">个人中心</van-tabbar-item>
  </van-tabbar>
</template>

<script>
import router from "@/router";
import { ref } from "vue";
import MyAxios from "@/plugins/MyAxios";
import { showLoadingToast, showNotify, showToast } from "vant";
export default {
  setup() {
    const userpoints = ref(0);
    const isauth = ref(0);
    //Vue3这里的setup就相当与Vue2中的created
    MyAxios.get("/user/get/login").then((res) => {
      const { code } = res;
      const { userPoints, isAuth } = res.data;
      if (code !== 0) {
        showNotify({ type: "danger", message: "请先登录" });
        router.push({ path: "/login" });
      }
      if (userPoints !== null) {
        userpoints.value = userPoints;
      }
      isauth.value = isAuth;
    });
    const activeName = ref("putout");
    const title = "title";
    const content = ref("");

    const tags = ref(["打听求助"]);
    const show = ref(false);
    const index = ref(0);

    const columns = [
      { text: "打听求助", value: "打听求助" },
      { text: "失物招领", value: "失物招领" },
      { text: "表白交友", value: "表白交友" },
      { text: "校园美景", value: "校园美景" },
      { text: "二手交易", value: "二手交易" },
      { text: "校园趣事", value: "校园趣事" },
      { text: "校内活动", value: "校内活动" },
    ];
    const onConfirm = ({ selectedValues }) => {
      tags.value[0] = selectedValues[0];
      show.value = false;
    };
    const checked = ref(false);
    const fileList = ref([]);

    let formData = new FormData();

    let isSubmitting = false; // 添加一个状态标记，防止重复提交
    const OnPutOut = () => {
      if (isSubmitting) return; // 判断是否正在提交，如果是则直接return
      isSubmitting = true;
      if (isauth.value === 0) {
        // showToast({
        //   type: "warning",
        //   message: "请先到个人中心进行身份认证吧(>-<)!",
        // });
        router.push({ path: "/authuser" });
        return;
      }
      if (userpoints.value <= 0) {
        showToast({
          type: "warning",
          message: "积分不足，请去个人中心签到领积分吧(>-<)!",
        });
        return;
      }
      const toast1 = showLoadingToast({
        message: "发布中...",
        forbidClick: true,
      });
      const anon = ref(0);
      if (checked.value) {
        anon.value = 1;
      } else {
        anon.value = 0;
      }

      for (const fileElement of fileList.value) {
        formData.append("files", fileElement.file);
      }

      formData.append("title", "测试标题");
      formData.append("anon", anon.value);
      formData.append("content", content.value);
      formData.append("tags", tags.value[0]);
      setTimeout(() => {
        MyAxios.post("/post/add", formData).then((res) => {
          const { code } = res;
          toast1.close();
          if (code === 0) {
            showNotify({ type: "success", message: "发布成功" }, 1000);
            setTimeout(() => {
              location.reload();
            }, 1000);
          } else {
            showNotify({ type: "danger", message: "发布失败" });
          }
          formData = new FormData();
          isSubmitting = false;
        });
      }, 500);
    };
    const OnchangeTab = (name) => {
      router.push({
        path: `/${name}`, // 假设你的路由路径是 /home, /about 这样的
        query: { name: name }, // query 参数应该是一个对象
      });
    };

    return {
      activeName,
      title,
      content,
      fileList,
      tags,
      show,
      index,
      columns,
      onConfirm,
      OnPutOut,
      OnchangeTab,
      checked,
      userpoints,
    };
  },
};
</script>

<style scoped></style>
